<template>
	<view>
		<view class="main">
			<view class="essentialInfo">
				<text class="frame"></text>
				<text class="essential">基本信息<text class="symbol">*</text></text>
				<view class="contactsBox">
					<text class="contacts">联系人</text>
					<input class="inputContacts" v-model="name" type="text" placeholder="请输入真实姓名" />
				</view>
			</view>
			<view class="storeInfo">
				<text class="frame"></text>
				<text class="essential">店铺信息<text class="symbol">*</text></text>
				<view class="storeBox">
					<text class="storeName">店铺名称</text>
					<input class="inpurName" type="text" v-model="shangpuname" placeholder="请输入店铺名称" />
				</view>
				<view class="storeBox" style="display: flex;align-items: center;">
					<text class="storeName">所在地区</text>
					<!-- <text class="choose" >请选择</text> -->
					<pick-regions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion">
						<view class="choose" v-if="regionName==''" style="color:#808080;width: 500rpx;margin-top: 4rpx;">
							点击选择地址
						</view>
						<text style="font-size: 28rpx;padding-left: 45rpx;">{{regionName}}</text>

					</pick-regions>
					<image class="goIcon" src="../../../static/user2/rightjt.png"></image>
				</view>
				<view class="storeBox">
					<text class="storeName">详细地址</text>
					<input class="inpurName" type="text" v-model="dizhi" placeholder="请输入详细地址" />
				</view>
				<view class="storeBox">
					<text class="storeName">客服电话</text>
					<input class="inpurName" type="text" v-model="tel" placeholder="请输入客服电话" />
				</view>
				<picker @change="bindPickerChange" :range="array" class="storeBox" range-key="name">
					<text class="storeName">所售类目</text>

					<text class="choose">请选择</text>
					<label class="" v-if="array[index]" style="font-size: 28rpx;padding-left: 45rpx;">{{array[index].name}}</label>
					<image class="goIcon" style="" src="/static/user2/rightjt.png"></image>
				</picker>
				<picker @change="bindPickerChange1" :range="array1" class="storeBox" range-key="name">
					<text class="storeName">店铺类型</text>

					<text class="choose">请选择</text>
					<label class="" v-if="array1[index1]" style="font-size: 28rpx;padding-left: 45rpx;">{{array1[index1].name}}</label>
					<image class="goIcon" style="" src="/static/user2/rightjt.png"></image>
				</picker>
				<view class="storeBox" @click="cI">
					<text class="storeName">营业执照</text>
					<text class="choose" v-if="pic==''">请选择</text>
					<image v-else :src="pic" mode=" " class="" style="width:80rpx;height:80rpx;margin-left: 200rpx;" @tap.stop="_previewImage(pic)"></image>
					<image class="goIcon" src="/static/user2/rightjt.png"></image>
				</view>
				<view class="storeBox" @click="choose_image">
					<text class="storeName">其他证件</text>


					<view class="" style="width: 300rpx;display: flex;">
						<view class="ml10 ml20" style="position: relative;" v-for="(item,index) in image_array" :key="index">
							<image :src="item" mode="" style="width: 80rpx;height: 80rpx;float:right;" @tap.stop="_previewImage(item)"></image>
							<image src="/static/task/shanchu.png" style="width:30rpx;height: 30rpx;position: absolute;top: -15rpx;right: -10rpx;"
							 mode="" @click.stop="shanchu(index)"></image>
						</view>
					</view>
					<image class="goIcon" src="/static/user2/rightjt.png"></image>
				</view>
			</view>
			<view class="footer">
				<checkbox :checked="isChecked" @click="isChecked = !isChecked" style="transform: scale(0.7); position: absolute;top: 16rpx;"/>
				
				<text class="rule">已阅读并同意遵守 <text class="rulea" @click="gorules">《发布规则》</text></text>
				<view class="login" @click="goqueding">
					申请入驻
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import Require from '@/common/require.js';
	import pickRegions from '@/components/pick-regions/pick-regions.vue'
	export default {
		components: {
			pickRegions
		},
		data() {
			return {
				defaultRegion: ['安徽省', '合肥市', '蜀山区'],
				defaultRegionCode: '440113',
				region: [],
				index: '',
				array: [],
				array1: [],
				index1: '',
				pic: '',
				leimoId: '',
				leixinId: '',
				name: '',
				shangpuname: '',
				dizhi: '',
				tel: '',
				isChecked: false,
				image_array: [],
			};
		},
		computed: {
			regionName() {
				// 转为字符串
				return this.region.map(item => item.name).join(' ')
			}
		},
		onLoad() {
			var self = this
			self.one_pid()
			self.two_pid()
		},
		methods: {
			//预览图片
			_previewImage(image) {
				var imgArr = [];
				imgArr.push(image);
				//预览图片
				uni.previewImage({
					urls: imgArr,
					current: imgArr[0]
				});
			},
			//删除数据中的图片
			shanchu: function(index) {
				this.image_array.splice(index, 1);
			},
			choose_image() {
				var self = this;
				if (self.image_array.length >= 3) {
					uni.showToast({
						icon: 'none',
						title: '最多上传3张图片',
						duration: 2000
					});
					return
				}
				uni.chooseImage({
					count: 3, //最大上传6张
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						if (res.tempFilePaths.length > 3) {
							uni.showToast({
								icon: 'none',
								title: '最多上传3张图片',
								duration: 2000
							});
						} else {
							uni.showLoading({
								title: '上传中'
							});
							for (let k = 0; k < res.tempFilePaths.length; k++) {
								// 上传评价图片
								uni.uploadFile({
									url: 'http://xjk.minshangkeji.com/index.php/api/upload/single',
									filePath: res.tempFilePaths[k],
									name: 'file',
									fileType: 'image',
									success: (uploadFileRes) => {
										uni.hideLoading();
										var data = JSON.parse(uploadFileRes.data);
										let url_href = data.data.filename
										self.image_array.push(url_href);
										if (self.image_array.length > 3) {
											self.image_array.length = 3
											uni.showToast({
												icon: 'none',
												title: '最多上传3张图片',
												duration: 2000
											});
										}
									}
								});
							}
						}
					}
				});
			},

			switch1Change: function(e) {
				var self = this
			},
			goqueding() {
				var self = this
				if (self.name == '') {
					uni.showToast({
						icon: "none",
						image: "/static/user2/delete.png",
						title: "姓名不能为空"
					})
				} else if (self.shangpuname == '') {
					uni.showToast({
						icon: "none",
						image: "/static/user2/delete.png",
						title: "店铺名不能为空"
					})
				} else if (self.regionName == '') {
					uni.showToast({
						icon: "none",
						image: "/static/user2/delete.png",
						title: "请填写地区"
					})
				} else if (self.dizhi == '') {
					uni.showToast({
						icon: "none",
						image: "/static/user2/delete.png",
						title: "请填写详细地址"
					})
				} else if (self.tel == '') {
					uni.showToast({
						icon: "none",
						image: "/static/user2/delete.png",
						title: "电话不能为空！"
					})
				} else if (self.leimoId == '') {
					uni.showToast({
						icon: "none",
						image: "/static/user2/delete.png",
						title: "填写售卖类目"
					})
				} else if (self.leixinId == '') {
					uni.showToast({
						icon: "none",
						image: "/static/user2/delete.png",
						title: "填写店铺类型"
					})
				} else if (self.pic == '') {
					uni.showToast({
						icon: "none",
						image: "/static/user2/delete.png",
						title: "上传营业执照"
					})
				} else if (self.isChecked == false) {
					uni.showToast({
						icon: "none",
						image: "/static/user2/delete.png",
						title: "请勾选服务规则"
					})
				} else {
					self.tijiao()
				}
			},
			// 提交
			tijiao() {
				var self = this;
				Require.commonRequest({
					url: '/api/store/apply',
					method: "POST",
					data: {
						contacts_name: self.name,
						company_address_detail: self.dizhi,
						contacts_phone: self.tel,
						store_name: self.shangpuname,
						business_licence_number_electronic: self.pic,
						company_province_id: self.region[0].name,
						company_city_id: self.region[1].name,
						company_district_id: self.region[2].name,
						store_type: self.leixinId,
						storeclass_id: self.leimoId,
						other_license: self.image_array
					},
					success: function(ret) {
						if (ret.data.code == 200) {
							console.log(ret)
							uni.navigateTo({
								url: "./auditStatus?id=" + 3
							})
						} else {
							uni.showToast({
								icon: "none",
								title: ret.data.msg
							})
						}

					},
					fail: function() {
						uni.showToast({
							icon: "none",
							title: "网络异常，请稍后再试"
						})
					}
				})
			},



			gorules() {
				uni.navigateTo({
					url: "Publishing_Rules"
				})
			},
			//预览图片
			_previewImage(image) {
				var imgArr = [];
				imgArr.push(image);
				//预览图片
				uni.previewImage({
					urls: imgArr,
					current: imgArr[0]
				});
			},
			cI: function() {
				var self = this
				uni.chooseImage({
					count: 1,
					sizeType: ['copressed'],
					success(res) {
						uni.showLoading({
							title: '上传中'
						});
						//因为有一张图片， 输出下标[0]， 直接输出地址
						var imgFiles = res.tempFilePaths[0]
						// console.log(res1)
						// 上传图片
						// 做成一个上传对象
						var uper = uni.uploadFile({
							// 需要上传的地址
							url: 'http://xjk.minshangkeji.com/index.php/api/upload/single',
							// filePath  需要上传的文件
							filePath: imgFiles,
							name: 'file',
							success(uploadFileRes) {
								var data = JSON.parse(uploadFileRes.data);
								self.pic = data.data.filename
								uni.hideLoading();
								console.log(uploadFileRes)
								// 显示上传信息
							}
						});
						// onProgressUpdate 上传对象更新的方法
						uper.onProgressUpdate(function(res) {
							// 进度条等于 上传到的进度
							self.percent = res.progress
						})
					}
				})
			},
			one_pid: function() {
				var self = this;
				Require.commonRequest({
					url: '/api/store/classify',
					success: function(ret) {
						if (ret.data.code == 200)
							console.log(ret.data.data)
						self.array = ret.data.data
					},
					fail: function() {
						uni.showToast({
							icon: "none",
							title: "网络异常，请稍后再试"
						})
					}
				})
			},
			two_pid: function() {
				var self = this;
				Require.commonRequest({
					url: '/api/store/type',
					success: function(ret) {
						if (ret.data.code == 200)
							console.log(ret.data.data)
						self.array1 = ret.data.data
					},
					fail: function() {
						uni.showToast({
							icon: "none",
							title: "网络异常，请稍后再试"
						})
					}
				})
			},
			// 类目事件
			bindPickerChange: function(e) {
				var self = this
				console.log(e.target)
				self.index = e.target.value //将数组改变索引赋给定义的index变量
				let jg = self.array[self.index] //将array【改变索引】的值赋给定义的jg变量
				console.log(jg.id)
				self.leimoId = jg.id
			},
			// 店铺类型
			bindPickerChange1: function(e) {
				var self = this
				self.index1 = e.target.value //将数组改变索引赋给定义的index变量
				let jg = self.array1[self.index1] //将array【改变索引】的值赋给定义的jg变量
				console.log(jg.id)
				self.leixinId = jg.id
			},
			handleGetRegion(region) {
				this.region = region
				console.log(region)
			},
		},
	}
</script>

<style lang="scss">
	uni-picker {
		line-height: 100rpx !important;
	}

	page {
		background-color: #EFEFF4;
	}

	.main {
		width: 750rpx;
		position: relative;
	}

	.essentialInfo {
		width: 710rpx;
		height: 200rpx;
		position: relative;
		left: 20rpx;
	}

	.frame {
		display: block;
		width: 10rpx;
		height: 30rpx;
		background: rgba(115, 34, 216, 1);
		border-radius: 5rpx;
		position: absolute;
		top: 30rpx;
		left: 20rpx;
	}

	.essential {
		font-size: 28rpx;
		color: #333333;
		position: absolute;
		top: 25rpx;
		left: 42rpx;
	}

	.symbol {
		font-size: 28rpx;
		color: #7322D8;
	}

	.contactsBox {
		width: 710rpx;
		height: 100rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 10rpx;
		position: relative;
		top: 90rpx;
		display: flex;
		align-items: center;
	}

	.contacts {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		position: absolute;
		left: 21rpx;
	}

	.inputContacts {
		font-size: 28rpx;
		position: absolute;
		left: 155rpx;
	}

	.accountInfo {
		width: 710rpx;
		height: 400rpx;
		position: relative;
		left: 20rpx;
	}

	.accountBox {
		width: 710rpx;
		height: 100rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		position: relative;
		top: 90rpx;
	}

	.account {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		position: absolute;
		left: 21rpx;
	}

	.inputaccount {
		font-size: 28rpx;
		position: absolute;
		left: 155rpx;
	}

	.storeInfo {
		width: 710rpx;
		height: 700rpx;
		position: relative;
		left: 20rpx;
	}

	.storeBox {
		width: 710rpx;
		height: 100rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 10rpx;
		position: relative;
		top: 90rpx;
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.storeName {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		position: relative;
		left: 21rpx;
	}

	.inpurName {
		font-size: 28rpx;
		position: absolute;
		left: 155rpx;
	}

	.choose {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(142, 142, 142, 1);
		position: absolute;
		right: 45rpx;
	}

	.goIcon {
		width: 14rpx;
		height: 22rpx;
		position: absolute;
		right: 20rpx;
	}

	.footer {
		width: 710rpx;
		height: 215rpx;
		position: relative;
		left: 20rpx;
		margin-top: 270rpx;
	}

	.rule {
		font-size: 28rpx;
		color: #333333;
		position: absolute;
		top: 25rpx;
		left: 52rpx;
	}

	.rulea {
		font-size: 28rpx;
		color: #7322D8;
	}

	.login {
		width: 710rpx;
		height: 90rpx;
		background: rgba(115, 34, 216, 1);
		box-shadow: 0rpx 0rpx 18rpx 2rpx rgba(115, 34, 216, 0.3);
		border-radius: 20rpx;
		position: absolute;
		bottom: 30rpx;
		font-size: 38rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(255, 255, 255, 1);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.shangchuan {
		width: 150rpx;
		height: 150rpx;
		border: 1rpx solid #E6E6E6;
		padding: 20rpx;
		box-sizing: border-box;
		margin-left: 20rpx !important;

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>
